<template>
  <!-- 科技感背景装饰 -->
  <!-- <div class="fixed inset-0 bg-grid bg-dark z-0 opacity-30"></div> -->
  <!-- <div class="fixed inset-0 bg-gradient-to-br from-dark via-dark-light to-dark z-0"></div> -->

  <div class="relative z-10">
    <!-- 科技感宣传区域 -->
    <section class="relative overflow-hidden py-16 md:py-24 mb-12 scroll-animate w-full">
      
      <!-- 动态光效 -->
      <div
        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/20 rounded-full filter blur-3xl animate-pulse z-0">
      </div>
      <div class="absolute top-1/3 left-1/4 w-64 h-64 bg-purple-600/10 rounded-full filter blur-3xl animate-pulse z-0"
        style="animation-delay: 1s"></div>

      <div class="px-4 relative z-10 max-w-7xl mx-auto">
        <div class="max-w-3xl mx-auto text-center">
          <h2 class="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight hero-title">
            探索<span class="text-primary">未来科技</span>的无限可能
          </h2>
          <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            我们致力于分享最新的科技趋势、创新项目和实用教程，帮助你开启科技创客之旅。
          </p>
        </div>
      </div>

      <!-- 装饰线条 -->
      <div
        class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent">
      </div>
      <div class="absolute top-0 left-0 bottom-0 w-px bg-gradient-to-b from-transparent via-primary/50 to-transparent">
      </div>
      <div class="absolute top-0 right-0 bottom-0 w-px bg-gradient-to-b from-transparent via-primary/50 to-transparent">
      </div>
    </section>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 主内容区 -->
      <div class="lg:col-span-2 space-y-8 relative">
        <!-- 装饰线条 -->
        <div class="absolute -left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary/0 via-primary/50 to-primary/0">
        </div>
        <!-- 特色文章 -->
        <section class="scroll-animate">
          <div class="flex items-center justify-between mb-6">
            <h2
              class="text-2xl font-bold text-white inline-block relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-1/3 after:bg-primary after:transition-all after:duration-500 hover:after:w-full">
              特色文章</h2>
            <router-link :to="'/featured'" class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
              查看全部 <i class="fa fa-arrow-right ml-1"></i>
            </router-link>
          </div>

          <router-link :to="'/post/' + featuredPost.id" class="block group">
            <div
              class="bg-dark-light/80 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 card-hover hover:border-primary/50 shadow-lg hover:shadow-primary/10 relative group">
              <div class="relative h-64 md:h-80 overflow-hidden">
                <img :src="featuredPost.image" :alt="featuredPost.title"
                  class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-98">
                <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/50 to-transparent"></div>
                <!-- 霓虹边框效果 -->
                <div
                  class="absolute inset-0 border-2 border-primary/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                </div>
                <div
                  class="absolute inset-0 animate-pulse border border-primary/50 rounded-xl opacity-0 group-hover:opacity-70 transition-opacity duration-500">
                </div>
                <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent"></div>
                <div class="absolute top-4 left-4">
                  <span class="bg-primary/90 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">
                    {{ featuredPost.category }}
                  </span>
                </div>
              </div>

              <div class="p-6">
                <h3
                  class="text-xl md:text-2xl font-bold text-white mb-3 hover:text-primary transition-colors text-shadow group-hover:text-primary/90">
                  {{ featuredPost.title }}
                </h3>
                <p class="text-gray-400 mb-4">{{ featuredPost.excerpt }}</p>

                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img :src="pictureUrl" alt="科技创客" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-300 text-sm">{{ featuredPost.author }}</span>
                    <span class="mx-2 text-gray-500">•</span>
                    <time :datetime="featuredPost.date" class="text-gray-500 text-sm">{{ formatDate(featuredPost.date) }}</time>
                    <span class="mx-2 text-gray-500">•</span>
                    <span class="text-gray-500 text-sm">{{ featuredPost.readTime }}</span>
                  </div>

                  <div class="flex items-center text-gray-500 text-sm">
                    <i class="fa fa-eye mr-1"></i> {{ featuredPost.views }}
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </section>

        <!-- 分类文章 -->
        <section v-for="category in ['3D打印', '电子DIY', '智能家居']" :key="category" class="scroll-animate">
          <div class="flex items-center justify-between mb-6">
            <h2
              class="text-2xl font-bold text-white inline-block relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-1/3 after:bg-primary after:transition-all after:duration-500 hover:after:w-full">
              {{ category }}</h2>
            <router-link :to="{ path: '/posts', query: { category } }" class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
              更多文章 <i class="fa fa-arrow-right ml-1"></i>
            </router-link>
          </div>

          <div class="grid grid-cols-1 gap-6">
            <!-- 统一为特色文章相同的卡片样式 -->
            <template v-for="post in filteredPosts(category)" :key="post.id">
              <router-link :to="'/post/' + post.id" class="block group">
                <article
                  class="bg-dark-light/80 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 card-hover hover:border-primary/50 shadow-lg hover:shadow-primary/10 relative group">
                  <div class="relative h-64 md:h-80 overflow-hidden">
                    <img :src="post.image" :alt="post.title"
                      class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-98">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/50 to-transparent"></div>

                    <!-- 添加与特色文章相同的霓虹边框效果 -->
                    <div
                      class="absolute inset-0 border-2 border-primary/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    </div>
                    <div
                      class="absolute inset-0 animate-pulse border border-primary/50 rounded-xl opacity-0 group-hover:opacity-70 transition-opacity duration-500">
                    </div>

                    <div class="absolute top-4 left-4">
                      <span class="bg-primary/90 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">
                        {{ post.category }}
                      </span>
                    </div>
                  </div>

                  <div class="p-6">
                    <!-- 统一标题样式 -->
                    <h3
                      class="text-xl font-bold text-white mb-3 hover:text-primary transition-colors text-shadow group-hover:text-primary/90 line-clamp-2">
                      {{ post.title }}
                    </h3>

                    <!-- 统一摘要样式 -->
                    <p class="text-gray-400 mb-4 line-clamp-2">{{ post.excerpt }}</p>

                    <!-- 统一底部信息栏，与特色文章保持一致 -->
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <img :src="pictureUrl" alt="科技创客" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-300 text-sm">{{ post.author }}</span>
                        <span class="mx-2 text-gray-500">•</span>
                        <time :datetime="post.date" class="text-gray-500 text-sm">{{ formatDate(post.date) }}</time>
                        <span class="mx-2 text-gray-500">•</span>
                        <span class="text-gray-500 text-sm">{{ post.readTime }}</span>
                      </div>

                      <div class="flex items-center text-gray-500 text-sm">
                        <i class="fa fa-eye mr-1"></i> {{ post.views }}
                      </div>
                    </div>
                  </div>
                </article>
              </router-link>
            </template>
          </div>
        </section>
      </div>

      <!-- 侧边栏 -->
      <div class="lg:col-span-1">
        <Sidebar />
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from '../components/Sidebar.vue'
import blogPosts from '../data/blogPosts'

import { pictureUrl } from '@/assets/image';

export default {
  components: {
    Sidebar
  },
  data() {
    return {
      posts: blogPosts,
      isVisible: true,
      pictureUrl
    }
  },
  computed: {
    featuredPost() {
      // 取最难的特色文章（假设为 isFeatured 且 views 最大的）
      return [...this.posts].filter(post => post.isFeatured).sort((a, b) => b.views - a.views)[0];
    }
  },
  methods: {
    filteredPosts(category) {
      return this.posts.filter(post => post.category === category).slice(0, 2);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
    },
  }
}
</script>

<style scoped>
/* 首页特定样式 */
/* 科技感装饰元素 */
.decorative-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--tw-gradient-stops));
  height: 1px;
  width: 100%;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 宣传区域粒子效果 */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.5);
  pointer-events: none;
  animation: float 4s infinite ease-in-out;
}

/* 星空效果 */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

/* 宣传区域标题动画 */
.hero-title span {
  display: inline-block;
  animation: glowText 2s infinite alternate;
}

@keyframes glowText {
  0% {
    text-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
  }

  100% {
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.5);
  }
}

/* 按钮脉冲效果 */
.btn-pulse {
  position: relative;
  overflow: hidden;
}

.btn-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* 动画关键帧 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
  }

  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
  }
}

/* 滚动触发动画类 */
.scroll-animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animate.active {
  opacity: 1;
  transform: translateY(0);
}

/* 增强卡片悬停效果 */
.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --tw-bg-opacity: 1;
  background: rgba(20, 24, 40, 0.12);
  backdrop-filter: blur(1px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 4px 32px #0002;
}

.card-hover:hover {
  transform: translateY(-8px) scale(1.01);
}
</style>